<template>
  <view class="container" :style="{ backgroundImage: `url(${backgroundUrl})` }" ref="pageContainer">
    <LoadingSpinner :show="loading" :text="loadingText" />
    <CityPicker v-if="showCityPicker" :show="showCityPicker" :currentCity="currentCity" @close="showCityPicker = false"
      @select="onCitySelect" />
    <view class="error-tip" v-if="error.show">
      <text>{{ error.message }}</text>
      <button @click="retryLoad">重试</button>
    </view>

    <!-- 隐藏的canvas用于截图 -->
    <canvas canvas-id="screenshotCanvas" :style="{ width: '750px', height: '1334px', position: 'fixed', left: '-9999px', top: '-9999px' }"></canvas>
    <view class="content">
      <WeatherCard :location="weather.location" :temperature="weather.temperature" :humidity="weather.humidity"
        :windSpeed="weather.windSpeed" @refresh="updateLocation" @location-change="handleLocationChange"
        @screenshot="handleScreenshot" />

      <DateCard ref="dateCardRef" />

      <WeatherForecast ref="forecastRef" :location="`${currentLocation.latitude}:${currentLocation.longitude}`" />

      <QuoteCard :text="quote.text" :author="quote.author" />

      <view class="history-entry" @click="navigateToHistory">
        <view class="history-content">
          <view class="history-icon">📅</view>
          <view class="history-text">
            <text class="title">历史上的今天</text>
            <text class="desc">探索历史长河中的今日故事</text>
          </view>
        </view>
        <text class="arrow">›</text>
      </view>

      <!-- <view class="hot-entry" @tap="goToHot">
        <view class="hot-content">
          <text class="title">今日热搜</text>
          <text class="desc">实时掌握热点话题动态</text>
        </view>
      </view> -->
    </view>

    <view class="screenshot-toast" :class="{ 'show': showScreenshotToast }">
      <text>截图已保存到相册</text>
    </view>

    <view class="auth-tip-card" v-if="showAuthTip">
      <view class="auth-tip-content">
        <view class="auth-tip-icon">📍</view>
        <view class="auth-tip-text">
          <text class="tip-title">开启定位更懂你</text>
          <text class="tip-desc">授权位置信息以获取精准天气</text>
        </view>
        <view class="auth-tip-actions">
          <button class="auth-btn" @click="handleAuthLocation">立即开启</button>
          <text class="auth-later" @click="hideAuthTip">暂不开启</text>
        </view>
      </view>
    </view>

    <view class="auth-tip-card" v-if="showScreenshotAuthTip">
      <view class="auth-tip-content">
        <view class="auth-tip-icon">📸</view>
        <view class="auth-tip-text">
          <text class="tip-title">保存精美天气卡片</text>
          <text class="tip-desc">授权相册权限以保存天气截图</text>
        </view>
        <view class="auth-tip-actions">
          <button class="auth-btn" @click="handleAuthScreenshot">立即开启</button>
          <text class="auth-later" @click="hideScreenshotAuthTip">暂不开启</text>
        </view>
      </view>
    </view>

    <view class="screenshot-generating" :class="{ 'show': isGeneratingScreenshot }">
      <view class="generating-content">
        <view class="generating-icon">🎨</view>
        <view class="generating-text">
          <text class="title">正在生成精美截图</text>
          <text class="desc">请稍候片刻...</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import WeatherCard from '@/components/WeatherCard.vue'
import QuoteCard from '@/components/QuoteCard.vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import CityPicker from '@/components/CityPicker.vue'
import WeatherForecast from '@/components/WeatherForecast.vue'
import DateCard from '@/components/DateCard.vue'
import { getWeather, getQuote, getRandomBackground, getAlmanac, getWeatherForecast } from '@/api/weather'
import { getCurrentLocation, saveLocationToStorage, getLastKnownLocation, DEFAULT_LOCATION, checkLocationAuth } from '@/utils/location'
// 响应式状态
const backgroundUrl = ref('')
const loading = ref(true)
const loadingText = ref('正在获取天气信息...')
const error = ref({
  show: false,
  message: ''
})
const weather = ref({
  location: '',
  temperature: 0,
  humidity: 0,
  windSpeed: 0
})
const quote = ref({
  text: '',
  author: ''
})
const currentLocation = ref(getLastKnownLocation())
const showCityPicker = ref(false)
const currentCity = ref({
  id: 'current',
  name: currentLocation.value.city,
  latitude: currentLocation.value.latitude,
  longitude: currentLocation.value.longitude
})
const showScreenshotToast = ref(false)
const showAuthTip = ref(false)
const showScreenshotAuthTip = ref(false)
const isGeneratingScreenshot = ref(false)

// 添加组件引用
const dateCardRef = ref(null)
const forecastRef = ref(null)

// 方法定义
const updateBackground = () => {
  backgroundUrl.value = getRandomBackground()
}

const showError = (message) => {
  error.value = {
    show: true,
    message: message || '操作失败，请稍后重试'
  }
  setTimeout(() => {
    hideError()
  }, 3000)
}

const hideError = () => {
  error.value.show = false
}

const updateWeather = async (customLocation = null) => {
  loading.value = true
  loadingText.value = '正在获取天气信息...'
  hideError()
  try {
    const locationInfo = customLocation || await getCurrentLocation()
    currentLocation.value = locationInfo
    saveLocationToStorage(locationInfo)

    const data = await getWeather(
      `${locationInfo.latitude}:${locationInfo.longitude}`
    )

    weather.value = {
      location: locationInfo.city || data.location?.name || DEFAULT_LOCATION.city,
      temperature: data.now?.temperature || 0,
      humidity: data.now?.humidity || 0,
      windSpeed: data.now?.wind_speed || 0
    }
  } catch (error) {
    console.error('天气数据获取失败:', error)
    showError('获取天气信息失败，请稍后再试')

    if (!weather.value.location) {
      weather.value = {
        location: DEFAULT_LOCATION.city,
        temperature: 0,
        humidity: 0,
        windSpeed: 0
      }
    }
  } finally {
    loading.value = false
  }
}

const updateQuote = async () => {
  try {
    const data = await getQuote()
    if (data) {
      quote.value = {
        text: data.text,
        author: data.author
      }
    }
  } catch (error) {
    console.error('获取名言失败:', error)
    uni.showToast({
      title: '获取名言失败',
      icon: 'none'
    })
  }
}

const retryLoad = async () => {
  hideError()
  await updateWeather()
  await updateQuote()
}

const updateLocation = async () => {
  try {
    loading.value = true
    loadingText.value = '正在获取位置信息...'
    hideError()

    const authStatus = await checkLocationAuth()
    if (!authStatus && !uni.getStorageSync('auth_tip_closed')) {
      showAuthTip.value = true
    }

    const locationInfo = await getCurrentLocation()

    currentLocation.value = locationInfo
    saveLocationToStorage(locationInfo)

    currentCity.value = {
      id: 'current',
      name: locationInfo.city,
      district: locationInfo.district,
      province: locationInfo.province,
      latitude: locationInfo.latitude,
      longitude: locationInfo.longitude
    }

    await updateWeather(locationInfo)
  } catch (error) {
    console.error('位置更新失败:', error)
    const defaultInfo = DEFAULT_LOCATION
    currentLocation.value = defaultInfo
    currentCity.value = {
      id: 'current',
      name: defaultInfo.city,
      district: defaultInfo.district,
      province: defaultInfo.province,
      latitude: defaultInfo.latitude,
      longitude: defaultInfo.longitude
    }
    await updateWeather(defaultInfo)
  } finally {
    loading.value = false
  }
}

const onCitySelect = async (city) => {
  currentCity.value = city
  const locationInfo = {
    city: city.name,
    latitude: city.latitude,
    longitude: city.longitude
  }
  currentLocation.value = locationInfo
  saveLocationToStorage(locationInfo)
  await updateWeather(locationInfo)
}

const handleLocationChange = async (locationInfo) => {
  currentLocation.value = locationInfo
  saveLocationToStorage(locationInfo)

  currentCity.value = {
    id: 'current',
    name: locationInfo.city,
    latitude: locationInfo.latitude,
    longitude: locationInfo.longitude
  }

  await updateWeather(locationInfo)
}

const handleScreenshot = async () => {
  const authStatus = await checkScreenshotAuth()
  if (!authStatus) {
    if (!uni.getStorageSync('screenshot_auth_tip_closed')) {
      showScreenshotAuthTip.value = true
    } else {
      uni.showModal({
        title: '需要相册权限',
        content: '请在设置中开启相册权限以保存天气截图',
        confirmText: '去设置',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting()
          }
        }
      })
    }
    return
  }

  // 添加用户确认对话框
  uni.showModal({
    title: '生成截图',
    content: '生成高清截图需要一点时间，是否继续？',
    confirmText: '继续',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        await takeScreenshot()
      }
    }
  })
}

const onShareAppMessage = () => {
  return {
    title: `${weather.value.location}天气：${weather.value.temperature}°C`,
    path: '/pages/index/index',
    imageUrl: backgroundUrl.value
  }
}

const onShareTimeline = () => {
  return {
    title: `${weather.value.location}天气：${weather.value.temperature}°C`,
    query: '',
    imageUrl: backgroundUrl.value
  }
}

const handleAuthLocation = async () => {
  try {
    const res = await uni.authorize({
      scope: 'scope.userLocation'
    })
    if (res) {
      showAuthTip.value = false
      await updateLocation()
    }
  } catch (error) {
    uni.showModal({
      title: '需要你的授权',
      content: '请在设置中开启位置权限以获取精准的天气信息',
      confirmText: '去设置',
      success: (res) => {
        if (res.confirm) {
          uni.openSetting()
        }
      }
    })
  }
}

const hideAuthTip = () => {
  showAuthTip.value = false
  uni.setStorageSync('auth_tip_closed', true)
}

const handleAuthScreenshot = async () => {
  try {
    const res = await uni.authorize({
      scope: 'scope.writePhotosAlbum'
    })
    if (res) {
      showScreenshotAuthTip.value = false
      await takeScreenshot()
    }
  } catch (error) {
    uni.showModal({
      title: '需要你的授权',
      content: '请在设置中开启相册权限以保存天气截图',
      confirmText: '去设置',
      success: (res) => {
        if (res.confirm) {
          uni.openSetting()
        }
      }
    })
  }
}

const hideScreenshotAuthTip = () => {
  showScreenshotAuthTip.value = false
  uni.setStorageSync('screenshot_auth_tip_closed', true)
}

const getDateCardInfo = async () => {
  try {
    const data = await getAlmanac()
    return {
      solarDate: formatSolarDate(data.solarDate),
      lunarDate: data.lunarDate,
      suitable: data.suitable,
      unsuitable: data.unsuitable
    }
  } catch (error) {
    console.error('获取农历信息失败:', error)
    return {
      solarDate: '获取失败',
      lunarDate: '获取失败',
      suitable: '获取失败',
      unsuitable: '获取失败'
    }
  }
}

const formatSolarDate = (dateStr) => {
  const date = new Date()
  const options = { month: 'long', day: 'numeric', weekday: 'long' }
  return date.toLocaleDateString('zh-CN', options)
}

const getForecastInfo = async () => {
  try {
    const data = await getWeatherForecast(`${currentLocation.value.latitude}:${currentLocation.value.longitude}`)
    return data.map(item => ({
      date: formatDate(item.date),
      weather: `${item.dayWeather}${item.dayWeather !== item.nightWeather ? ` 转${item.nightWeather}` : ''}`,
      temperature: {
        high: item.high,
        low: item.low
      },
      details: [
        `${item.windDirection}风 ${item.windSpeed}级`,
        `湿度 ${item.humidity}%`
      ]
    }))
  } catch (error) {
    console.error('获取天气预报失败:', error)
    return []
  }
}

const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)

  if (date.toDateString() === today.toDateString()) {
    return '今天'
  } else if (date.toDateString() === tomorrow.toDateString()) {
    return '明天'
  } else {
    return '后天'
  }
}

const drawWeatherCard = async (ctx, currentY, canvas, cardMargin) => {
  // 绘制天气卡片背景
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  const weatherCardHeight = 200
  roundRect(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, weatherCardHeight, 15)

  // 绘制位置信息
  ctx.fillStyle = '#fff'
  ctx.font = 'bold 18px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText(`📍 ${weather.value.location}`, cardMargin + 20, currentY + 35)

  // 绘制温度
  ctx.font = 'bold 64px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText(`${weather.value.temperature}°`, canvas.width / 2, currentY + 110)

  // 绘制湿度和风速
  ctx.font = '13px sans-serif'
  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
  ctx.textAlign = 'center'
  ctx.fillText('湿度', canvas.width / 2 - 70, currentY + 145)
  ctx.fillText('风速', canvas.width / 2 + 70, currentY + 145)

  ctx.font = 'bold 15px sans-serif'
  ctx.fillStyle = '#fff'
  ctx.fillText(`${weather.value.humidity}%`, canvas.width / 2 - 70, currentY + 170)
  ctx.fillText(`${weather.value.windSpeed}km/h`, canvas.width / 2 + 70, currentY + 170)

  return weatherCardHeight
}

const drawQuoteCard = async (ctx, currentY, canvas, cardMargin) => {
  ctx.save()

  // 计算文本布局
  ctx.font = '14px sans-serif'
  const textPadding = 20
  const textWidth = canvas.width - (cardMargin + textPadding) * 2
  const textStartX = cardMargin + textPadding
  const lineHeight = 24
  const maxLines = 4

  // 计算文本分行
  const textLines = []
  const words = quote.value.text.split('')
  let line = ''

  for (let i = 0; i < words.length; i++) {
    const testLine = line + words[i]
    const metrics = ctx.measureText(testLine)

    if (metrics.width > textWidth && i > 0) {
      textLines.push(line)
      if (textLines.length >= maxLines - 1) {
        // 截断过长文本
        const remaining = words.slice(i).join('')
        if (remaining.length > 3) {
          line = words.slice(i, i + Math.min(10, remaining.length)).join('') + '...'
        } else {
          line = remaining
        }
        break
      }
      line = words[i]
    } else {
      line = testLine
    }
  }
  if (line && textLines.length < maxLines) {
    textLines.push(line)
  }

  // 计算卡片高度
  const textTotalHeight = Math.max(textLines.length * lineHeight, lineHeight * 2)
  const authorHeight = 30
  const quoteCardHeight = textTotalHeight + authorHeight + textPadding * 2

  // 绘制卡片背景
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  roundRect(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, quoteCardHeight, 15)

  // 绘制名言文本
  ctx.fillStyle = '#fff'
  ctx.font = '14px sans-serif'
  ctx.textAlign = 'left'

  let currentTextY = currentY + textPadding + 18
  textLines.forEach((line) => {
    ctx.fillText(line, textStartX, currentTextY)
    currentTextY += lineHeight
  })

  // 绘制作者署名
  ctx.font = '12px sans-serif'
  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
  ctx.textAlign = 'right'
  ctx.fillText(
    `—— ${quote.value.author}`,
    canvas.width - cardMargin - textPadding,
    currentY + quoteCardHeight - textPadding - 5
  )

  ctx.restore()

  return quoteCardHeight
}

const takeScreenshot = async () => {
  try {
    loading.value = true
    loadingText.value = '正在生成截图...'
    isGeneratingScreenshot.value = true

    // 等待一小段时间确保UI更新
    await new Promise(resolve => setTimeout(resolve, 100))

    // 使用canvas组件ID
    const ctx = uni.createCanvasContext('screenshotCanvas')

    // 获取容器尺寸
    const containerInfo = await new Promise((resolve) => {
      const query = uni.createSelectorQuery()
      query.select('.container')
        .boundingClientRect()
        .exec((res) => {
          if (res && res[0]) {
            resolve(res[0])
          } else {
            resolve({ width: 375, height: 667 })
          }
        })
    })

    const canvasWidth = containerInfo.width
    const canvasHeight = containerInfo.height * 1.2

    // 定义布局变量
    const cardMargin = 20
    let currentY = 40

    // 绘制背景图片
    loadingText.value = '正在加载背景...'

    // 绘制背景
    ctx.drawImage(backgroundUrl.value, 0, 0, canvasWidth, canvasHeight)

    // 绘制背景渐变遮罩
    const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight)
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)')
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)')
    ctx.setFillStyle(gradient)
    ctx.fillRect(0, 0, canvasWidth, canvasHeight)

    // 创建模拟canvas对象供绘制函数使用
    const mockCanvas = {
      width: canvasWidth,
      height: canvasHeight
    }

    loadingText.value = '正在绘制内容...'

    // 绘制天气卡片
    const weatherCardHeight = await drawWeatherCardToCtx(ctx, currentY, mockCanvas, cardMargin)
    currentY += weatherCardHeight + cardMargin

    // 绘制日期卡片
    const dateCardHeight = await drawDateCardToCtx(ctx, currentY, mockCanvas, cardMargin)
    currentY += dateCardHeight + cardMargin

    // 绘制天气预报卡片
    const forecastCardHeight = await drawForecastCardToCtx(ctx, currentY, mockCanvas, cardMargin)
    currentY += forecastCardHeight + cardMargin

    // 绘制名言卡片
    const quoteCardHeight = await drawQuoteCardToCtx(ctx, currentY, mockCanvas, cardMargin)
    currentY += quoteCardHeight + cardMargin

    // 执行绘制
    ctx.draw(false, async () => {
      // 等待绘制完成
      await new Promise(resolve => setTimeout(resolve, 500))

      loadingText.value = '正在保存到相册...'

      // 导出图片
      uni.canvasToTempFilePath({
        canvasId: 'screenshotCanvas',
        success: async (res) => {
          try {
            await uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath
            })

            showScreenshotToast.value = true
            setTimeout(() => {
              showScreenshotToast.value = false
            }, 2000)
          } catch (err) {
            console.error('保存到相册失败:', err)
            uni.showToast({
              title: '保存失败，请检查相册权限',
              icon: 'none'
            })
          } finally {
            loading.value = false
            isGeneratingScreenshot.value = false
          }
        },
        fail: (err) => {
          console.error('导出图片失败:', err)
          uni.showToast({
            title: '截图失败，请稍后重试',
            icon: 'none'
          })
          loading.value = false
          isGeneratingScreenshot.value = false
        }
      })
    })

  } catch (error) {
    console.error('截图失败, 详细错误:', error)
    uni.showToast({
      title: '截图失败：' + error.message,
      icon: 'none',
      duration: 3000
    })
    loading.value = false
    isGeneratingScreenshot.value = false
  }
}

// 检查截图权限
const checkScreenshotAuth = () => {
  return new Promise((resolve) => {
    uni.getSetting({
      success: (res) => {
        resolve(res.authSetting['scope.writePhotosAlbum'] === true)
      },
      fail: () => {
        resolve(false)
      }
    })
  })
}

// 添加圆角矩形绘制函数（uni-app canvas API版本）
const roundRectToCtx = (ctx, x, y, width, height, radius) => {
  if (width < 2 * radius) radius = width / 2
  if (height < 2 * radius) radius = height / 2

  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.arcTo(x + width, y, x + width, y + height, radius)
  ctx.arcTo(x + width, y + height, x, y + height, radius)
  ctx.arcTo(x, y + height, x, y, radius)
  ctx.arcTo(x, y, x + width, y, radius)
  ctx.closePath()

  ctx.setShadow(0, 2, 10, 'rgba(0, 0, 0, 0.1)')
  ctx.fill()
  ctx.setShadow(0, 0, 0, 'transparent')
}

// 天气卡片绘制函数（uni-app canvas API版本）
const drawWeatherCardToCtx = async (ctx, currentY, canvas, cardMargin) => {
  const weatherCardHeight = 200
  
  // 绘制卡片背景
  ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
  roundRectToCtx(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, weatherCardHeight, 15)

  // 绘制位置信息
  ctx.setFillStyle('#fff')
  ctx.setFontSize(18)
  ctx.setTextAlign('left')
  ctx.setTextBaseline('top')
  ctx.fillText(`📍 ${weather.value.location}`, cardMargin + 20, currentY + 30)

  // 绘制温度
  ctx.setFontSize(64)
  ctx.setTextAlign('center')
  ctx.setTextBaseline('middle')
  ctx.fillText(`${weather.value.temperature}°`, canvas.width / 2, currentY + 110)

  // 绘制湿度和风速
  ctx.setFontSize(13)
  ctx.setFillStyle('rgba(255, 255, 255, 0.7)')
  ctx.setTextAlign('center')
  ctx.setTextBaseline('top')
  ctx.fillText('湿度', canvas.width / 2 - 70, currentY + 150)
  ctx.fillText('风速', canvas.width / 2 + 70, currentY + 150)

  ctx.setFontSize(15)
  ctx.setFillStyle('#fff')
  ctx.fillText(`${weather.value.humidity}%`, canvas.width / 2 - 70, currentY + 170)
  ctx.fillText(`${weather.value.windSpeed}km/h`, canvas.width / 2 + 70, currentY + 170)

  return weatherCardHeight
}

// 日期卡片绘制函数（uni-app canvas API版本）
const drawDateCardToCtx = async (ctx, currentY, canvas, cardMargin) => {
  const dateInfo = await getDateCardInfo()
  const suitableContent = dateInfo.suitable || '暂无数据'
  const unsuitableContent = dateInfo.unsuitable || '暂无数据'

  const dateCardHeight = 200

  // 绘制卡片背景
  ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
  roundRectToCtx(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, dateCardHeight, 15)

  // 绘制日期部分
  ctx.setFillStyle('#fff')
  ctx.setTextAlign('center')
  ctx.setFontSize(18)
  ctx.setTextBaseline('top')
  ctx.fillText(dateInfo.solarDate, canvas.width / 2, currentY + 25)

  ctx.setFontSize(13)
  ctx.setFillStyle('rgba(255, 255, 255, 0.75)')
  ctx.fillText(dateInfo.lunarDate, canvas.width / 2, currentY + 48)

  // 绘制分隔线
  ctx.setFillStyle('rgba(255, 255, 255, 0.2)')
  ctx.fillRect(cardMargin + 20, currentY + 70, canvas.width - cardMargin * 2 - 40, 1)

  // 计算宜忌布局位置
  const centerX = canvas.width / 2
  const leftColumnX = cardMargin + 25  // 左侧列起始位置
  const rightColumnX = centerX + 15    // 右侧列起始位置
  const labelY = currentY + 90
  const contentY = labelY + 35  // 内容起始Y位置

  // === 绘制左侧"宜" ===
  // 绘制"宜"标签背景
  ctx.setFillStyle('rgba(255, 255, 255, 0.1)')
  roundRectToCtx(ctx, leftColumnX, labelY, 35, 22, 11)
  
  // 绘制"宜"标签边框
  ctx.setStrokeStyle('#91f991')
  ctx.setLineWidth(1.5)
  ctx.strokeRect(leftColumnX, labelY, 35, 22)

  // 绘制"宜"文字
  ctx.setFillStyle('#91f991')
  ctx.setFontSize(13)
  ctx.setTextAlign('center')
  ctx.setTextBaseline('middle')
  ctx.fillText('宜', leftColumnX + 17.5, labelY + 11)

  // 绘制"宜"的内容
  ctx.setFillStyle('rgba(255, 255, 255, 0.9)')
  ctx.setFontSize(11)
  ctx.setTextAlign('left')
  ctx.setTextBaseline('top')
  
  // 处理文本 - 最多显示18个字符，分两行
  const suitableText = suitableContent.length > 18 
    ? suitableContent.substring(0, 18)
    : suitableContent
  
  const suitableLine1 = suitableText.substring(0, 9)
  const suitableLine2 = suitableText.length > 9 ? suitableText.substring(9) : ''
  
  ctx.fillText(suitableLine1, leftColumnX, contentY)
  if (suitableLine2) {
    ctx.fillText(suitableLine2, leftColumnX, contentY + 20)
  }

  // 绘制中间分隔线
  ctx.setFillStyle('rgba(255, 255, 255, 0.2)')
  ctx.fillRect(centerX - 5, labelY, 1, 100)

  // === 绘制右侧"忌" ===
  // 绘制"忌"标签背景
  ctx.setFillStyle('rgba(255, 255, 255, 0.1)')
  roundRectToCtx(ctx, rightColumnX, labelY, 35, 22, 11)
  
  // 绘制"忌"标签边框
  ctx.setStrokeStyle('#ff9292')
  ctx.setLineWidth(1.5)
  ctx.strokeRect(rightColumnX, labelY, 35, 22)

  // 绘制"忌"文字
  ctx.setFillStyle('#ff9292')
  ctx.setFontSize(13)
  ctx.setTextAlign('center')
  ctx.setTextBaseline('middle')
  ctx.fillText('忌', rightColumnX + 17.5, labelY + 11)

  // 绘制"忌"的内容
  ctx.setFillStyle('rgba(255, 255, 255, 0.9)')
  ctx.setFontSize(11)
  ctx.setTextAlign('left')
  ctx.setTextBaseline('top')
  
  // 处理文本 - 最多显示18个字符，分两行
  const unsuitableText = unsuitableContent.length > 18 
    ? unsuitableContent.substring(0, 18)
    : unsuitableContent
  
  const unsuitableLine1 = unsuitableText.substring(0, 9)
  const unsuitableLine2 = unsuitableText.length > 9 ? unsuitableText.substring(9) : ''
  
  ctx.fillText(unsuitableLine1, rightColumnX, contentY)
  if (unsuitableLine2) {
    ctx.fillText(unsuitableLine2, rightColumnX, contentY + 20)
  }

  return dateCardHeight
}

// 天气预报卡片绘制函数（uni-app canvas API版本）
const drawForecastCardToCtx = async (ctx, currentY, canvas, cardMargin) => {
  const forecastItems = await getForecastInfo()
  const forecastCardHeight = 220

  ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
  roundRectToCtx(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, forecastCardHeight, 15)

  ctx.setFillStyle('rgba(255, 255, 255, 0.9)')
  ctx.setFontSize(15)
  ctx.setTextAlign('left')
  ctx.fillText('未来天气', cardMargin + 20, currentY + 28)

  const itemWidth = (canvas.width - cardMargin * 2 - 40) / 3
  const startX = cardMargin + 20

  forecastItems.forEach((item, index) => {
    const x = startX + itemWidth * index + (index > 0 ? index * 10 : 0)
    const y = currentY + 55

    ctx.setFillStyle('rgba(255, 255, 255, 0.9)')
    ctx.setFontSize(14)
    ctx.setTextAlign('center')
    ctx.fillText(item.date, x + itemWidth / 2, y)

    ctx.setFillStyle('rgba(255, 255, 255, 0.75)')
    ctx.setFontSize(12)
    const weatherText = item.weather.length > 8 ? item.weather.substr(0, 8) : item.weather
    ctx.fillText(weatherText, x + itemWidth / 2, y + 25)

    ctx.setFontSize(17)
    ctx.setFillStyle('#ff6b6b')
    ctx.fillText(`${item.temperature.high}°`, x + itemWidth / 2 - 18, y + 55)

    ctx.setFillStyle('rgba(255, 255, 255, 0.4)')
    ctx.setFontSize(14)
    ctx.fillText('/', x + itemWidth / 2, y + 55)

    ctx.setFillStyle('#4ecdc4')
    ctx.setFontSize(17)
    ctx.fillText(`${item.temperature.low}°`, x + itemWidth / 2 + 18, y + 55)

    ctx.setFillStyle('rgba(255, 255, 255, 0.65)')
    ctx.setFontSize(11)
    item.details.forEach((detail, idx) => {
      const detailText = detail.length > 12 ? detail.substr(0, 12) : detail
      ctx.fillText(detailText, x + itemWidth / 2, y + 80 + idx * 18)
    })

    if (index < 2) {
      ctx.setFillStyle('rgba(255, 255, 255, 0.15)')
      ctx.fillRect(x + itemWidth + 5, y - 10, 1, 120)
    }
  })

  return forecastCardHeight
}

// 名言卡片绘制函数（uni-app canvas API版本）
const drawQuoteCardToCtx = async (ctx, currentY, canvas, cardMargin) => {
  const textPadding = 20
  const lineHeight = 22
  const maxChars = 40 // 每行最多字符数
  
  // 处理文本，最多显示两行
  const text = quote.value.text
  let line1 = ''
  let line2 = ''
  
  if (text.length > maxChars) {
    line1 = text.substring(0, maxChars)
    line2 = text.substring(maxChars, maxChars * 2 - 3) + '...'
  } else {
    line1 = text
  }

  const textTotalHeight = line2 ? lineHeight * 2 : lineHeight
  const authorHeight = 25
  const quoteCardHeight = textTotalHeight + authorHeight + textPadding * 2 + 20

  // 绘制卡片背景
  ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
  roundRectToCtx(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, quoteCardHeight, 15)

  // 绘制文本
  ctx.setFillStyle('#fff')
  ctx.setFontSize(13)
  ctx.setTextAlign('left')
  ctx.setTextBaseline('top')
  
  const textX = cardMargin + textPadding
  let textY = currentY + textPadding + 10
  
  ctx.fillText(line1, textX, textY)
  if (line2) {
    textY += lineHeight
    ctx.fillText(line2, textX, textY)
  }

  // 绘制作者
  ctx.setFontSize(12)
  ctx.setFillStyle('rgba(255, 255, 255, 0.8)')
  ctx.setTextAlign('right')
  ctx.fillText(
    `—— ${quote.value.author}`, 
    canvas.width - cardMargin - textPadding, 
    currentY + quoteCardHeight - textPadding - 8
  )

  return quoteCardHeight
}

// 添加圆角矩形绘制函数
const roundRect = (ctx, x, y, width, height, radius) => {
  if (width < 2 * radius) radius = width / 2
  if (height < 2 * radius) radius = height / 2

  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.arcTo(x + width, y, x + width, y + height, radius)
  ctx.arcTo(x + width, y + height, x, y + height, radius)
  ctx.arcTo(x, y + height, x, y, radius)
  ctx.arcTo(x, y, x + width, y, radius)
  ctx.closePath()

  // 添加内部阴影效果
  ctx.save()
  ctx.shadowColor = 'rgba(0, 0, 0, 0.1)'
  ctx.shadowBlur = 10
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 2
  ctx.fill()
  ctx.restore()
}

const drawDateCard = async (ctx, currentY, canvas, cardMargin) => {
  const dateInfo = await getDateCardInfo()

  ctx.save()

  // 准备宜忌内容
  const suitableContent = dateInfo.suitable || '暂无数据'
  const unsuitableContent = dateInfo.unsuitable || '暂无数据'

  // 计算宜忌文本高度
  ctx.font = '13px sans-serif'
  const columnWidth = (canvas.width - cardMargin * 2 - 60) / 2
  const lineHeight = 22
  const maxTextHeight = 100

  // 分割宜的文本
  const suitableLines = splitTextToLines(ctx, suitableContent, columnWidth - 20, lineHeight, maxTextHeight)
  // 分割忌的文本
  const unsuitableLines = splitTextToLines(ctx, unsuitableContent, columnWidth - 20, lineHeight, maxTextHeight)

  // 计算实际内容高度
  const contentHeight = Math.max(suitableLines.height, unsuitableLines.height)
  const dateCardHeight = 40 + 25 + 15 + 40 + contentHeight + 25 // 日期区域 + 分隔线 + 标签 + 内容 + 底部边距

  // 绘制日期卡片背景
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  roundRect(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, dateCardHeight, 15)

  // 绘制日期部分
  ctx.fillStyle = '#fff'
  ctx.textAlign = 'center'
  ctx.font = 'bold 18px sans-serif'
  ctx.fillText(dateInfo.solarDate, canvas.width / 2, currentY + 30)

  ctx.font = '13px sans-serif'
  ctx.fillStyle = 'rgba(255, 255, 255, 0.75)'
  ctx.fillText(dateInfo.lunarDate, canvas.width / 2, currentY + 52)

  // 绘制分隔线
  ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
  ctx.fillRect(cardMargin + 20, currentY + 67, canvas.width - cardMargin * 2 - 40, 1)

  // 宜忌布局
  const centerX = canvas.width / 2
  const suitableX = cardMargin + 30
  const unsuitableX = centerX + 15
  const labelY = currentY + 95

  // 绘制宜的标签
  ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'
  ctx.strokeStyle = '#91f991'
  ctx.lineWidth = 1.5
  roundRect(ctx, suitableX, labelY, 35, 22, 11)
  ctx.stroke()

  ctx.fillStyle = '#91f991'
  ctx.font = 'bold 13px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText('宜', suitableX + 17.5, labelY + 16)

  // 绘制宜的内容
  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
  ctx.font = '13px sans-serif'
  ctx.textAlign = 'left'
  let textY = labelY + 35
  suitableLines.lines.forEach((line) => {
    ctx.fillText(line, suitableX, textY)
    textY += lineHeight
  })

  // 绘制中间分隔线
  ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
  ctx.fillRect(centerX - 7.5, labelY - 10, 1, contentHeight + 50)

  // 绘制忌的标签
  ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'
  ctx.strokeStyle = '#ff9292'
  ctx.lineWidth = 1.5
  roundRect(ctx, unsuitableX, labelY, 35, 22, 11)
  ctx.stroke()

  ctx.fillStyle = '#ff9292'
  ctx.font = 'bold 13px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText('忌', unsuitableX + 17.5, labelY + 16)

  // 绘制忌的内容
  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
  ctx.font = '13px sans-serif'
  ctx.textAlign = 'left'
  textY = labelY + 35
  unsuitableLines.lines.forEach((line) => {
    ctx.fillText(line, unsuitableX, textY)
    textY += lineHeight
  })

  ctx.restore()

  return dateCardHeight
}

// 辅助函数：将文本分割成多行
const splitTextToLines = (ctx, text, maxWidth, lineHeight, maxHeight) => {
  const lines = []
  let currentLine = ''
  let totalHeight = 0
  const maxLines = Math.floor(maxHeight / lineHeight)

  for (let i = 0; i < text.length; i++) {
    const testLine = currentLine + text[i]
    const metrics = ctx.measureText(testLine)

    if (metrics.width > maxWidth && currentLine.length > 0) {
      lines.push(currentLine)
      totalHeight += lineHeight

      if (lines.length >= maxLines - 1 && i < text.length - 1) {
        // 最后一行添加省略号
        currentLine = text.substr(i, Math.min(maxWidth / 10, text.length - i)) + '...'
        break
      }
      currentLine = text[i]
    } else {
      currentLine = testLine
    }
  }

  if (currentLine && lines.length < maxLines) {
    lines.push(currentLine)
    totalHeight += lineHeight
  }

  return { lines, height: totalHeight }
}

const drawForecastCard = async (ctx, currentY, canvas, cardMargin) => {
  const forecastItems = await getForecastInfo()
  const forecastCardHeight = 220

  // 绘制天气预报卡片背景
  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
  roundRect(ctx, cardMargin, currentY, canvas.width - cardMargin * 2, forecastCardHeight, 15)

  // 绘制标题
  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
  ctx.font = 'bold 15px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText('未来天气', cardMargin + 20, currentY + 28)

  // 绘制预报列表
  const itemWidth = (canvas.width - cardMargin * 2 - 40) / 3
  const startX = cardMargin + 20

  forecastItems.forEach((item, index) => {
    const x = startX + itemWidth * index + (index > 0 ? index * 10 : 0)
    const y = currentY + 55

    // 日期
    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
    ctx.font = 'bold 14px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(item.date, x + itemWidth / 2, y)

    // 天气
    ctx.fillStyle = 'rgba(255, 255, 255, 0.75)'
    ctx.font = '12px sans-serif'
    const weatherText = item.weather.length > 8 ? item.weather.substr(0, 8) + '...' : item.weather
    ctx.fillText(weatherText, x + itemWidth / 2, y + 25)

    // 温度
    ctx.font = 'bold 17px sans-serif'
    ctx.fillStyle = '#ff6b6b'
    ctx.fillText(`${item.temperature.high}°`, x + itemWidth / 2 - 18, y + 55)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
    ctx.font = '14px sans-serif'
    ctx.fillText('/', x + itemWidth / 2, y + 55)
    ctx.fillStyle = '#4ecdc4'
    ctx.font = 'bold 17px sans-serif'
    ctx.fillText(`${item.temperature.low}°`, x + itemWidth / 2 + 18, y + 55)

    // 详情
    ctx.fillStyle = 'rgba(255, 255, 255, 0.65)'
    ctx.font = '11px sans-serif'
    item.details.forEach((detail, idx) => {
      const detailText = detail.length > 12 ? detail.substr(0, 12) : detail
      ctx.fillText(detailText, x + itemWidth / 2, y + 80 + idx * 18)
    })

    // 分隔线
    if (index < 2) {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'
      ctx.fillRect(x + itemWidth + 5, y - 10, 1, 120)
    }
  })

  return forecastCardHeight
}

// 添加导航方法
const navigateToHistory = () => {
  uni.navigateTo({
    url: '/pages/history/history'
  })
}

// 添加跳转方法
const goToHot = () => {
  uni.navigateTo({
    url: '/pages/hot/index'
  })
}

// 生命周期钩子
onMounted(() => {
  updateBackground()
  updateWeather()
  updateQuote()

  setInterval(updateBackground, 30 * 60 * 1000)
  setInterval(updateWeather, 10 * 60 * 1000)
  setInterval(updateQuote, 60 * 60 * 1000)

  uni.removeStorageSync('auth_tip_closed')
  uni.removeStorageSync('screenshot_auth_tip_closed')
})
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.45));
    padding: 12px 15px;
    padding-top: 30px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;

    // 调整各组件占比和样式
    :deep(.weather-card) {
      margin: 0;
      padding: 16px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      flex: 0 0 auto;

      .header-actions {
        margin-bottom: 12px;
      }

      .temperature {
        font-size: min(62px, 13vw);
        margin: 8px 0;
        font-weight: 600;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .location-text {
        font-weight: 500;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        font-size: 17px;
      }

      .temperature-container {
        margin: 10px 0;
      }

      .weather-info {
        margin-top: 14px;
        padding-top: 14px;
      }

      .info-label {
        font-size: 13px;
        opacity: 0.8;
      }

      .info-value {
        font-size: 16px;
        font-weight: 500;
      }
    }

    :deep(.date-card) {
      margin: 0;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      flex: 0 0 auto;

      .date-section {
        margin-bottom: 12px;
      }

      .solar-date {
        font-weight: 600;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        font-size: 18px;
        margin-bottom: 6px;
      }

      .lunar-date {
        font-weight: 400;
        font-size: 13px;
      }

      .divider {
        margin: 12px 0;
      }

      .almanac-section {
        margin-top: 12px;
      }

      .almanac-item {
        padding: 8px 6px;

        .label {
          font-size: 13px;
          margin-bottom: 10px;
          padding: 4px 12px;
        }

        .value {
          font-size: 12px;
          line-height: 1.6;
          padding: 0 6px;
        }
      }
    }

    :deep(.forecast-card) {
      margin: 0;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      flex: 1 1 auto;
      min-height: 0;

      .forecast-title {
        margin-bottom: 12px;
        font-weight: 600;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        font-size: 15px;
      }

      .forecast-list {
        .forecast-item {
          padding: 6px;

          .date {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 8px;
          }

          .weather {
            font-size: 12px;
            margin-bottom: 8px;
          }

          .temperature {
            font-size: 17px;
            margin: 8px 0;
            font-weight: 600;

            .high, .low {
              text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            }
          }

          .details {
            font-size: 11px;
            line-height: 1.5;

            text {
              margin-bottom: 4px;
            }
          }
        }
      }
    }

    :deep(.quote-card) {
      margin: 0;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      flex: 0 0 auto;

      &::before {
        font-size: 42px;
        top: 6px;
        left: 10px;
      }

      .quote-text {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 8px;
        font-weight: 400;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        padding-left: 6px;
      }

      .quote-author {
        font-size: 12px;
        margin-top: 6px;
        text-align: right;
        font-style: italic;
        opacity: 0.85;
      }
    }

    .history-entry {
      margin: 0;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex: 0 0 auto;

      &:active {
        transform: scale(0.97);
        background: rgba(255, 255, 255, 0.22);
      }

      .history-content {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .history-icon {
        font-size: 24px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
      }

      .history-text {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .title {
          font-size: 15px;
          font-weight: 600;
          color: #fff;
          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        .desc {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.75);
        }
      }

      .arrow {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 200;
      }
    }
  }

  .error-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-radius: 16px;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    text {
      color: #fff;
      font-size: 14px;
      margin-bottom: 12px;
      display: block;
      line-height: 1.5;
    }

    button {
      margin-top: 12px;
      background: #fff;
      color: #000;
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:active {
        opacity: 0.8;
        transform: scale(0.95);
      }
    }
  }

  .screenshot-toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 14px 28px;
    border-radius: 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    &.show {
      bottom: 50px;
    }
  }

  .auth-tip-card {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 30px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;

    .auth-tip-content {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .auth-tip-icon {
      font-size: 34px;
      color: #007AFF;
      filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.2));
    }

    .auth-tip-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;

      .tip-title {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
      }

      .tip-desc {
        font-size: 13px;
        color: #666;
        line-height: 1.4;
      }
    }

    .auth-tip-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 12px;
      justify-content: flex-end;

      .auth-btn {
        background: #007AFF;
        color: #fff;
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        transition: all 0.3s ease;

        &:active {
          opacity: 0.85;
          transform: scale(0.95);
        }
      }

      .auth-later {
        font-size: 14px;
        color: #666;
        padding: 8px 14px;
        font-weight: 500;

        &:active {
          opacity: 0.6;
        }
      }
    }
  }

  .auth-tip-card.screenshot {
    .auth-tip-icon {
      color: #FF6B6B;
      filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.2));
    }

    .auth-btn {
      background: #FF6B6B;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .screenshot-generating {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(15px);
    padding: 20px 28px;
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);

    &.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
    }

    .generating-content {
      display: flex;
      align-items: center;
      white-space: nowrap;
      gap: 16px;
    }

    .generating-icon {
      font-size: 36px;
      animation: pulse 1.5s infinite;
    }

    .generating-text {
      display: flex;
      flex-direction: column;
      min-width: 150px;
      gap: 5px;

      .title {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
      }

      .desc {
        color: rgba(255, 255, 255, 0.75);
        font-size: 14px;
      }
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.15);
    }

    100% {
      transform: scale(1);
    }
  }
}

.hot-entry {
  margin: 5px 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  color: #fff;

  &:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.25);
  }

  .hot-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 12px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }

    .desc {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  &::before {
    content: "🔥";
    font-size: 20px;
  }

  &::after {
    content: "›";
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    margin-right: 4px;
  }
}
</style>
